﻿/*!
 * 背景相关
 *
 *
 */

// 定义两个背景，前和后
var background = function () {
	//画布对象
	var bgf = $('#background1').get(0).getContext('2d'),
		bgb = $('#background2').get(0).getContext('2d'),
		bgfcanvas = $('#background1').get(0),
		bgbcanvas = $('#background2').get(0),
		// 直接绘制，第二个参数'front'为前，'back'为后
		draw = function (src, stage) {
			if (stage == 'front') {
				bgf.clearRect(0, 0, 800, 600);
			} else if (stage == 'back') {
				bgb.clearRect(0, 0, 800, 600);
			}
			var image = new Image();
			image.src = src;
			image.onload = function(){
				if (stage == 'front') {
					bgf.drawImage(image, 0, 0, 800, 600);
				} else if (stage == 'back') {
					bgb.drawImage(image, 0, 0, 800, 600);
				}
			}
		},
		// 将前景淡入
		fadeinF = function (src, time) {
			var image = new Image();
			image.src = src;
			image.onload = function () {
				var deltaTime = time / 50,
					deltaAlpha = 1 / 50,
					fade = function(alpha, timeout) {
					setTimeout(function () {
						bgf.clearRect(0, 0, 800, 600);
						bgf.globalAlpha = alpha;
						bgf.drawImage(image, 0, 0, 800, 600);
					}, timeout);
				};
				for (var i = 0; i < 50; i++){
					fade((i + 1) * deltaAlpha, Math.floor(i * deltaTime));
				};
			};
		}
		// 将前背景淡出
		fadeoutF = function (time) {
			var image = new Image();
			image.src = bgfcanvas.toDataURL();
			var deltaTime = time / 50;
			var deltaAlpha = 1 / 50;
			var fade = function(alpha, timeout) {
				setTimeout(function () {
					bgf.clearRect(0, 0, 800, 600);
					bgf.globalAlpha = alpha;
					bgf.drawImage(image, 0, 0, 800, 600);
				}, timeout)
			}
			for (var i = 0; i < 50; i++){
				fade((49 - i) * deltaAlpha, Math.floor(i * deltaTime));
			}
		},
		//将后一个背景拷贝到前一个
		backtofront = function () {
			var image = new Image();
			image.src = bgbcanvas.toDataURL();
			image.onload = function(){
				bgf.drawImage(image, 0, 0, 800, 600);
			}
		},
		//将前一个背景拷贝到后一个
		fronttoback = function () {
			var image = new Image();
			image.src = bgfcanvas.toDataURL();
			image.onload = function(){
				bgb.drawImage(image, 0, 0, 800, 600);
			}
		},
		that = {
		//测试用，闪屏用
		test: function () {
			for (var i = 1; i<10; ++i){
				setTimeout(function(){
				bgf.fillStyle = '#333333';
				bgf.fillRect(0,0,800,600);},i*1000);
				setTimeout(function(){
				bgf.fillStyle = '#CCCCCC';
				bgf.fillRect(0,0,800,600);},i*1000+500);
			}
		},
		// 在前一个背景上绘图
		draw: function(src) {
			draw(src, 'front');
		},
		// 在后一个背景上绘图（这里用来实现offscreen buffer的功能~）
		draw2: function(src) {
			draw(src, 'back');
		},
		// 在后面的背景上绘制矩形，接受的参数为颜色代码
		drawcolor: function (color) {
			bgb.clearRect(0, 0, 800, 600);
			bgb.fillStyle = color;
			bgb.fillRect(0, 0, 800, 600);
			
		},
		// 清空背景
		clear: function (x, y, width, height) {
			bgf.clearRect(x, y, width, height);
		},
		// 马赛克效果（从左上到右下，因为for循环的问题改了一下午-_-）
		masaic1: function () {
			// 因为for循环的原因，要用一个timeout函数来接受里面的变量并延时执行
			var timef = function(xPos,yPos,timeout){
				setTimeout(function () {
					bgf.clearRect(xPos, yPos, 10, 10);}, timeout);
			}
			for (var x = 0; x < 80; x++) {
				for (var y = 0; y < 60; y++) {
					var xPos = 10* x, yPos = 10 * y, timeout = (x+y) * 50+100;
					timef(xPos, yPos, timeout);
				}
			}
			
		},
		// 马赛克效果（从右上到左下）
		masaic2: function () {
			// 因为for循环的原因，要用一个timeout函数来接受里面的变量并延时执行
			var timef = function(xPos,yPos,timeout){
				setTimeout(function () {
					bgf.clearRect(xPos, yPos, 10, 10);}, timeout);
			}
			for (var x = 79; x >= 0; x--) {
				for (var y = 0; y < 60; y++) {
					var xPos = 10* x, yPos = 10 * y, timeout = ((80-x)+y) * 50+100;
					timef(xPos, yPos, timeout);
				}
			}
			
		},
		// 淡入函数，传入要淡入的图片和淡入时间两个参数
		fadein: function (src, time) {
			fadeinF(src, time);
		},
		// 淡出函数，会把当时的屏幕上的图像淡出，接受一个参数：淡出时间
		fadeout: function (time) {
			fadeoutF(time);
		},
		// 淡出函数2，可以指定图片（其实是因为本地运行的时候会因为canvas污染问题导致淡出函数无法运行）
		fadeout2: function(src, time) {
			var image = new Image();
			image.src = src;
			var deltaTime = time / 50;
			var deltaAlpha = 1 / 50;
			var fade = function(alpha, timeout) {
				setTimeout(function () {
					bgf.clearRect(0, 0, 800, 600);
					bgf.globalAlpha = alpha;
					bgf.drawImage(image, 0, 0, 800, 600);
				}, timeout)
			}
			for (var i = 0; i < 50; i++){
				fade((49 - i) * deltaAlpha, Math.floor(i * deltaTime));
			}
		},
		f2b: function() {
			fronttoback();
		},
		b2f: function() {
			backtofront();
		},
		// 传说中的灰阶过滤器
		greyfilter: function () {
			var image = document.images[0],
				imageData, data;
			imageData = bgf.getImageData(0, 0, 800, 600);
			data = imageData.data;
			
			for (var i = 0; i < data.length; i += 4){
				var red = data[i],
					green = data[i + 1],
					blue = data[i + 2],
					// alpha = data[i + 3],
					average = Math.floor((red + green + blue) / 3);
				data[i] = average;
				data[i + 1] = average;
				data[i + 2] = average;
			}	
			
			imageData.data = data;
			bgf.putImageData(imageData, 0, 0);
		},
		// 图片渐隐切换
		transform: function (to, time) {
			fronttoback();
			fadeinF(to, time);
		}
		
	};
	return that;
}



